
<div style="POSITION: relative" id="content">
  <h3>使用easyUI创建Tabs标签 </h3>
  <div id="article_content" class="article_content">
    <p>这个教程将告诉你如何使用easyui创建一个tabs 组件,Tabs 有多个panel可以动态的添加或移除,你可以使用tabs 显示不同的实体在相同的页面.Tabs 一次仅仅显示一个panel,每个panel都有 title,icon and close 按钮,当tabs 选中时对应的panel内容将显示. </p>
    <p><img src="documentation/images/1344482407_6706.png" alt="" /></p>
    <p>从HTML标记创建Tabs包含一个DIV容器,和一些DIV panel.</p>
    <p>
    <pre name="code" class="html">&lt;div class=&quot;easyui-tabs&quot; style=&quot;width:400px;height:100px;&quot;&gt;  
    &lt;div title=&quot;First Tab&quot; style=&quot;padding:10px;&quot;&gt;  
        First Tab  
    &lt;/div&gt;  
    &lt;div title=&quot;Second Tab&quot; closable=&quot;true&quot; style=&quot;padding:10px;&quot;&gt;  
        Second Tab  
    &lt;/div&gt;  
    &lt;div title=&quot;Third Tab&quot; iconCls=&quot;icon-reload&quot; closable=&quot;true&quot; style=&quot;padding:10px;&quot;&gt;  
        Third Tab  
    &lt;/div&gt;  
&lt;/div&gt;  </pre>
    </p>
    <p>我们创建一tabs组件和3个panel,第二个和第三个panel可以通过点击close按关闭
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/layout/downloads/easyui-tabs-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-tabs-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>